<script setup lang="ts">
import { ref, computed } from 'vue'
import { RouterView } from 'vue-router'
import inxHeader from './inxHeader.vue'
import type { CSSProperties } from 'vue'
import type { aniDirect } from './type'

const headerStyle: CSSProperties = {
  height: '64px',
  backgroundColor: '#fff',
  borderBottom: '1px solid rgba(230,230,230,0.5)'
}
const contentStyle: CSSProperties = {
  height: 'calc(100vh - 64px)',
  position: 'relative',
  overflow: 'hidden',
  background: 'rgba(51,180,255,0.05)'
}

const toLeft = ref<boolean>(true)
const chgAniDirect: aniDirect = (value) => {
  toLeft.value = value
}
const aniName = computed(() => {
  return toLeft.value ? 'left' : 'right'
})
</script>

<template>
  <main>
    <a-layout>
      <a-layout-header :style="headerStyle">
        <inx-header @change="chgAniDirect"></inx-header>
      </a-layout-header>
      <a-layout-content :style="contentStyle">
        <router-view v-slot="{ Component }">
          <transition
            enter-active-class="aniEnter"
            leave-active-class="aniLeave"
            mode="out-in"
            appear
          >
            <component :is="Component" />
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </main>
</template>

<style scoped lang="scss">
.aniEnter {
  animation: enter 0.4s ease;
}
.aniLeave {
  animation: leave 0.4s ease;
}

@keyframes enter {
  from {
    clip-path: polygon(0 0, 50% 50%, 100% 0, 50% 50%, 100% 100%, 50% 50%, 0 100%, 50% 50%);
  }
  to {
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
  }
}
@keyframes leave {
  from {
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
  }
  to {
    clip-path: polygon(0 0, 50% 50%, 100% 0, 50% 50%, 100% 100%, 50% 50%, 0 100%, 50% 50%);
  }
}
</style>
